<template>
  <div>
    <div v-if="showDot">
      <Dot :x="x - (targetSize / 2)"
           :y="y - (targetSize / 2)"
           :size="targetSize"
           :text="SierpinskiTriangle"
      >
        <slot></slot>
      </Dot>
    </div>
    <div v-else>
      <SierpinskiTriangle :x="x" :y="y - (s / 2)" :s="s">
        <slot></slot>
      </SierpinskiTriangle>
    </div>
  </div>
</template>

<script>
import Dot from './Dot'


export default {
  name: 'SierpinskiTriangle',
  props: {
    x: {
      type: Number,
      default: ''
    },
    y: {
      type: Number,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    text: {
      type: null,
      default: ''
    },
  },
  components: {Dot},
  data() {
    return {
      targetSize: 25,
      s: 0
    }
  },
  methods: {},
  computed: {
    showDot: function () {
      var newSize = this.s / 2;
      var slowDown = true;
      if (slowDown) {
        var e = performance.now() + 0.8;
        while (performance.now() < e) {
          // Artificially long execution time.
        }
      }
      this.s /= 2;
      return this.s <= this.targetSize
    }
  },

  mounted() {
  },
}
</script>

<style scoped>
.first {
  width: 300px;
  height: 100px;
  background-color: lightskyblue;
}

.tow {
  width: 300px;
  height: 100px;
  background-color: red;
}
</style>
